<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>老物件收集 | 第4忆库</title>
    <style>

/* Fullscreen Overlay Styles */
.fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    cursor: zoom-out;
}

#fullscreen-image {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border: 2px solid #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}

.close-fullscreen {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    cursor: pointer;
    z-index: 2001;
}

#fullscreen-description {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    color: white;
    text-align: center;
    padding: 10px;
    background: rgba(0, 0, 0, 0.7);
}

#fullscreen-image {
    transition: transform 0.3s ease;
}

#fullscreen-image:hover {
    transform: scale(1.02);
}

.grid-item {
    cursor: pointer;
    /* ... other existing styles ... */
}
#upload-section {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

#upload-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#upload-form select, 
#upload-form input[type="file"],
#upload-form textarea {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

#upload-form textarea {
    height: 80px;
    resize: vertical;
}

#upload-form button[type="submit"] {
    padding: 10px;
    background-color: #2196F3;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.gallery-title {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
}

.gallery-title .subtitle {
    font-weight: normal;
    color: #666;
    font-size: 16px;
    margin-top: 8px;
}
.gallery-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.image-description {
    font-size: 14px;
    color: #555;
    text-align: center;
    padding: 0 10px;
    line-height: 1.4;
}

    .subtitle {
        color: #555555; /* Dark grey color */
    }

        /* Basic Reset and Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }
        
        body {
            background-color: #f8f8f8;
            padding: 20px;
            line-height: 1.6;
        }
        
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
            padding: 15px 0;
            border-bottom: 1px solid #ddd;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #333;
        }
        
        nav ul {
            display: flex;
            list-style: none;
        }
        
        nav ul li a {
            text-decoration: none;
            color: #333;
            padding: 5px 10px;
        }
        
        .grid-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .grid-item {
            background: white;
            padding: 30px;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }
        
        .grid-item:hover {
            transform: translateY(-5px);
        }
        
        .grid-item h1, .grid-item h2 {
            color: #222;
            margin-bottom: 20px;
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
        }
        
        /* Popup Overlay */
        .popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        /* Image Gallery Popup */
        .image-gallery {
            background: white;
            width: 80%;
            max-width: 900px;
            max-height: 80vh;
            padding: 20px;
            border-radius: 8px;
            overflow-y: auto;
            position: relative;
        }
        
        .gallery-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
        
        .gallery-image {
            width: 100%;
            height: 300px;
            object-fit: cover;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        
        .close-btn {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 24px;
            cursor: pointer;
        }
        .edit-description-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 3px;
    padding: 5px 8px;
    cursor: pointer;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s;
}

.gallery-item:hover .edit-description-btn {
    opacity: 1;
}

.gallery-item {
    position: relative;
    /* ... keep your existing styles ... */
}

.edit-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 3000;
}

.edit-form {
    background: white;
    padding: 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
}

.edit-form h3 {
    margin-bottom: 15px;
}

.edit-form textarea {
    width: 100%;
    height: 150px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 15px;
    resize: vertical;
}

.edit-form button {
    padding: 10px 15px;
    margin-right: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.save-btn {
    background: #4CAF50;
    color: white;
}

.cancel-btn {
    background: #f44336;
    color: white;
}

    </style>
</head>
<body>
    <header>
        <div class="logo">第4忆库</div>
        <nav>
            <ul>
                <li><a href="html xf.html">主页</a></li>
                <li><a href="vintage-objects.html">收藏集</a></li>
                <li><a href="about_page.html">关于</a></li>
                <li><a href="contact.html">联系</a></li>
            </ul>
        </nav>
    </header>

    <div class="grid-container">
        <div class="grid-item">
            <h1>老物件收集 </h1>
            <p>探索我们的校史收藏品...每一个方框都可以点击浏览！</p>
        </div>
        
        <!-- Bicycle Plates Section -->
        <div class="grid-item" id="bicycle-plates">
            <h2>自行车牌</h2>
            <p class="subtitle">“早出门十分钟，骑到什刹海后海一带，赏晨光，看冬泳，听拔嗓儿，钻胡同儿。” 多美好的回忆！您骑车上学时一般都会走哪条路呢？快来看看老自行车牌系列！</p>
            
        </div>

        <!-- NEW Badges Box -->
        <div class="grid-item" id="badges">
         <h2>徽章</h2>
         <p class="subtitle">四中图案的徽章别在胸前，我就是街上最帅最美的崽！</p>
         
        </div> 

        <!-- Paperwork Section -->
        <div class="grid-item" id="paperwork">
            <h2>文件收集</h2>
            <p>证书、手册、餐证、借书卡。各种文件应有尽有！</p>
        </div>

        <!-- Admission Letters Section -->
        <div class="grid-item" id="admissionletters">
            <h2>录取通知书系列</h2>
            <p class="subtitle">从50年代前的张贴录取名单到邮寄录取信，收到加入四中大家庭的邀请函总是令人激动的。您是否记得踏入校园时的场景--六边形教室威严矗立，还有新同学和老师们的面容？</p>
            
        </div>

        <!-- Cafeteria collection -->
        <div class="grid-item" id="cafeteria">
            <h2>食堂记忆 </h2>
            <p class="subtitle">
                80年代同学带着粮票儿和饭票儿，抄起饭盒一路狂奔去食堂打饭，路上扬起一道黄烟。
                <br><br>
                90年代同学竞走去饭堂，若跑步被值周生抓着是件恼火的事情。饭堂菜品琳琅满目，您最喜欢哪道菜肴呢？
            </p>
        </div>

         <!-- Uniforms collection -->
        <div class="grid-item" id="uniforms">
            <h2>校服收集</h2>
            <p class="subtitle">
                校服一穿，学子风采。战袍一穿，所向披靡！
                
            </p>
        </div>

        <!-- Souv collection -->
        <div class="grid-item" id="souv">
            <h2>纪念品系列</h2>
            <p class="subtitle">校友返校日的手办和纪念封</p>
            
        </div>

        <!-- rules173 Section -->
        <div class="grid-item" id="rules173">
            <h2>四中学生手册</h2>
            <p class="subtitle">“四中的校规严格，管理规范，奖惩分明，学生自觉、自律，这就是四中校风的核心。”</p>
        </div>

        <!-- Academic Handbook Section -->
        <div class="grid-item" id="academichandbook">
            <h2>北京市高中学生成绩手册</h2>
            <p>学生成绩填报本。</p>
        </div>
</div>

    <!-- Bicycle Plates Popup -->
<div class="popup-overlay" id="bicycle-plates-popup">
    <div class="image-gallery">
    <span class="close-btn">&times;</span>
    <div class="gallery-title">
        <h2>自行车牌</h2>
        <p class="subtitle">北京直到2004年才取消自行车牌照制度。在此之前，自行车必须申请牌照才能合法上路；此后，自行车牌照逐渐退出历史舞台，成为承载记忆的老物件。</p>
    </div>
            <div class="gallery-container">
    <div class="gallery-item">
        <img src="images/bicycle-plate1.jpg" alt="Bicycle Plate 1" class="gallery-image">
        <div class="image-description">04 年自行车牌    </div>
    </div>
    <div class="gallery-item">
        <img src="images/bicycle-plate2.jpg" alt="Bicycle Plate 2" class="gallery-image">
        <div class="image-description">80年代自行车牌   </div>
    </div>
    <div class="gallery-item">
        <img src="images/bicycle-plate3.jpg" alt="Bicycle Plate 3" class="gallery-image">
        <div class="image-description">老自行车牌，为90-93年校友分享。</div>
    </div>
    <div class="gallery-item">
        <img src="images/bicycle-plate4.jpg" alt="Bicycle Plate 4" class="gallery-image">
        <div class="image-description">老自行车牌，为60s-90s教师分享。</div>
    </div>
</div>
        </div>
    </div>

<!-- Badges Popup -->
<div class="popup-overlay" id="badges-popup">
    <div class="image-gallery">
        <span class="close-btn">&times;</span>
        <div class="gallery-title">
            <h2>徽章收集</h2>
            <p class="subtitle">北京四中校徽收集（60年代-2020s）</p>
        </div>
        <div class="gallery-container">
            <div class="gallery-item">
                <img src="images/badge1.jpg" alt="Badge 1" class="gallery-image">
                <div class="image-description">84年国庆35周年的纪念章。为区统一发放，没有学校Logo。</div>
            </div>
            <!-- Add more badge items as needed -->
		<div class="gallery-item">
                <img src="images/badge2.jpg" alt="Badge 2" class="gallery-image">
                <div class="image-description">2023四中发放的教师纪念章。设计沿用的是1987年八十周年校庆纪念章的图案，寓意大致是四中八十，来自五湖四海。</div>
            </div>
                <div class="gallery-item">
                <img src="images/badge3.jpg" alt="Badge 3" class="gallery-image">
                <div class="image-description">北京四中110周年校庆纪念章。</div>
            </div>
                <div class="gallery-item">
                <img src="images/badge4.jpg" alt="Badge 4" class="gallery-image">
                <div class="image-description">北京四中110周年校庆纪念章。</div>
            </div>
                <div class="gallery-item">
                <img src="images/badge5.jpg" alt="Badge 5" class="gallery-image">
                <div class="image-description">学校纪念徽章。由1990-1993届校友分享。下方徽章因设计被其他更美观的版本取代，因而更为稀有。</div>
            </div>
                <div class="gallery-item">
                <img src="images/badge6.jpg" alt="Badge 6" class="gallery-image">
                <div class="image-description">北京四中80周年校庆纪念章。</div>
            </div>
                <div class="gallery-item">
                <img src="images/badge7.jpg" alt="Badge 7" class="gallery-image">
                <div class="image-description">"北京四中"字样徽章，为60s-90s教师分享。</div>
            </div>
                <div class="gallery-item">
                <img src="images/badge8.jpg" alt="Badge 8" class="gallery-image">
                <div class="image-description">"北京四中"字样徽章，为1999届校友分享。</div>
            </div>
                <div class="gallery-item">
                <img src="images/badge9.jpg" alt="Badge 9" class="gallery-image">
                <div class="image-description">"北京四中"字样徽章，为1995届校友分享。</div>
            </div>
        </div>
    </div>
</div>

<!-- Paperwork Popup -->
<div class="popup-overlay" id="paperwork-popup">
    <div class="image-gallery">
        <span class="close-btn">&times;</span>
        <div class="gallery-title">
            <h2>文件收集</h2>
            <p class="subtitle">这里收集了四中各式各样的文件。</p>
        </div>
        <div class="gallery-container">
            
        </div>
    </div>
</div>

<!-- rules173 Popup -->
<div class="popup-overlay" id="rules173-popup">
    <div class="image-gallery">
        <span class="close-btn">&times;</span>
        <div class="gallery-title">
            <h2>四中学生手册</h2>
            <p class="subtitle">“我们根据北京市中学生日常行为规范礼仪常规要求和四中的具体实际相结合，制定了我们四中的一百七十三条校规，在众多的校规中既有奖励条例，也有惩处条例，并印制成册，人手一份。确定建立严格校风的依据和标准。”</p>
            
        </div>
        <div class="gallery-container">
            
        </div>
    </div>
</div>

<!-- Academic Handbook Popup -->
<div class="popup-overlay" id="academichandbook-popup">
    <div class="image-gallery">
        <span class="close-btn">&times;</span>
        <div class="gallery-title">
            <h2>北京市高中学生成绩手册 </h2>
            
             <p class="subtitle">这本小册子分发给各学校作为学生学业记录的自填档案。物理实验、历史、地理等选修课成绩空白，可能因为该学生未选修这些课程。</p>
        </div>
        <div class="gallery-container">
            
        </div>
    </div>
</div>

<!-- Admission Letters Popup -->
<div class="popup-overlay" id="admissionletters-popup">
    <div class="image-gallery">
        <span class="close-btn">&times;</span>
        <div class="gallery-title">
            <h2>录取通知书系列</h2>
            <p class="subtitle">这是一个记录北京四中录取通知书演变历程的收藏，从1960年代的手写版本到现代印刷格式，跨越六十年（1960年代-2020年代）。</p>
            
        </div>
        <div class="gallery-container">
            
        </div>
    </div>
</div>

<!-- Cafeteria Collection -->
<div class="popup-overlay" id="cafeteria-popup">
    <div class="image-gallery">
        <span class="close-btn">&times;</span>
        <div class="gallery-title">
            <h2>食堂记忆 </h2>
            <p class="subtitle">这是一个收藏了复古饭卡、菜单和餐厅纪念品的合集，记录了四中30年以来的食堂历史。</p>
            
        </div>
        <div class="gallery-container">
            
        </div>
    </div>
</div>

<!-- Souvenir Collection -->
<div class="popup-overlay" id="souv-popup">
    <div class="image-gallery">
        <span class="close-btn">&times;</span>
        <div class="gallery-title">
            <h2>纪念品系列 </h2>
            <p class="subtitle">这个系列展示了北京四中在校友返校和聚会活动时赠送的纪念品和礼物。</p>
            
        </div>
        <div class="gallery-container">
            
        </div>
    </div>
</div>

<!-- Uniforms Collection -->
<div class="popup-overlay" id="uniforms-popup">
    <div class="image-gallery">
        <span class="close-btn">&times;</span>
        <div class="gallery-title">
            <h2>校服收集</h2>
            <p class="subtitle">这个系列展示了北京四中30年校服的多样。</p>
            
        </div>
        <div class="gallery-container">
            
        </div>
    </div>
</div>

<!-- Fullscreen Image Overlay -->
<div class="fullscreen-overlay" id="fullscreen-overlay">
    <span class="close-fullscreen">&times;</span>
    <img id="fullscreen-image" src="" alt="Fullscreen Image">
    <div class="image-description" id="fullscreen-description"></div>
</div>

<!-- Edit Image Button -->
<div class="edit-overlay" id="edit-overlay">
    <div class="edit-form">
        <h3>Edit Image Description</h3>
        <textarea id="edit-description-textarea" placeholder="Enter new description (English/Chinese)"></textarea>
        <div>
            <button class="save-btn" id="save-description">Save</button>
            <button class="cancel-btn" id="cancel-edit">Cancel</button>
        </div>
    </div>
</div>

<script>

document.addEventListener('DOMContentLoaded', function() {

    // ========== EXISTING CODE (KEEP ALL OF THIS) ==========
    // Fullscreen Image Handling
    const fullscreenOverlay = document.getElementById('fullscreen-overlay');
    const fullscreenImage = document.getElementById('fullscreen-image');
    const fullscreenDescription = document.getElementById('fullscreen-description');
    const closeFullscreen = document.querySelector('.close-fullscreen');

    // Function to open an image in fullscreen
    function openFullscreen(imageSrc, description) {
        fullscreenImage.src = imageSrc;
        fullscreenDescription.textContent = description;
        fullscreenOverlay.style.display = 'flex';
    }

    // Close fullscreen overlay
    closeFullscreen.addEventListener('click', () => {
        fullscreenOverlay.style.display = 'none';
    });

    // Close when clicking outside the image
    fullscreenOverlay.addEventListener('click', (e) => {
        if (e.target === fullscreenOverlay) {
            fullscreenOverlay.style.display = 'none';
        }
    });

    // Add click event to ALL gallery images
    document.querySelectorAll('.gallery-image').forEach(img => {
        img.addEventListener('click', function() {
            const description = this.nextElementSibling?.textContent || '';
            openFullscreen(this.src, description);
        });
    });

    // ========== ADD NEW EDIT FUNCTIONALITY HERE ==========
    
    // Edit description functionality
    let currentEditingImage = null;
    let currentEditingFilename = null;

    // Create edit overlay elements
    const editOverlay = document.getElementById('edit-overlay');
    const editTextarea = document.getElementById('edit-description-textarea');
    const saveBtn = document.getElementById('save-description');
    const cancelBtn = document.getElementById('cancel-edit');

    // Function to add edit button to gallery items
    function addEditButtonToGalleryItem(galleryItem, filename) {
        // Check if edit button already exists
        if (galleryItem.querySelector('.edit-description-btn')) {
            return; // Don't add duplicate buttons
        }
        
        const editBtn = document.createElement('button');
        editBtn.className = 'edit-description-btn';
        editBtn.textContent = 'Edit';
        editBtn.onclick = function(e) {
            e.stopPropagation(); // Prevent triggering fullscreen
            openEditDialog(galleryItem, filename);
        };
        galleryItem.appendChild(editBtn);
    }

    // Function to open edit dialog
    function openEditDialog(galleryItem, filename) {
        const descriptionElement = galleryItem.querySelector('.image-description');
        const currentDescription = descriptionElement.textContent;
        
        currentEditingImage = descriptionElement;
        currentEditingFilename = filename;
        
        editTextarea.value = currentDescription;
        editOverlay.style.display = 'flex';
    }

    // Save description
    saveBtn.addEventListener('click', async function() {
        const newDescription = editTextarea.value.trim();
        if (!newDescription) {
            alert('Description cannot be empty');
            return;
        }
        
        try {
            const response = await fetch('/api/edit-description', {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    filename: currentEditingFilename,
                    description: newDescription
                })
            });
            
            const data = await response.json();
            
            if (response.ok) {
                // Update the description in the UI
                currentEditingImage.textContent = newDescription;
                editOverlay.style.display = 'none';
                alert('Description updated successfully!');
            } else {
                alert('Failed to update description: ' + (data.error || 'Unknown error'));
            }
        } catch (error) {
            console.error('Error updating description:', error);
            alert('Error updating description. Please check your connection.');
        }
    });

    // Cancel edit
    cancelBtn.addEventListener('click', function() {
        editOverlay.style.display = 'none';
    });

    // Close on overlay click
    editOverlay.addEventListener('click', function(e) {
        if (e.target === editOverlay) {
            editOverlay.style.display = 'none';
        }
    });

    // ========== CONTINUE WITH YOUR EXISTING CODE BUT MODIFY addImageToGallery ==========

    // 1. 从服务器获取上传的图片 (KEEP THIS EXISTING FUNCTION)
    async function fetchUploadedImages() {
        try {
            console.log('开始从服务器获取上传的图片...');
            // 获取上传的图片列表及元数据
            const response = await fetch('/api/uploads');
            if (response.ok) {
                const data = await response.json();
                
                if (data && data.images && Array.isArray(data.images)) {
                    console.log('收到图片数据:', data.images.length, '张图片');
                    
                    // 按照分类处理图片
                    data.images.forEach((img, index) => {
                        console.log(`处理第 ${index + 1} 张图片:`, img);
                        if (img.filename && img.collection) {
                            // 使用服务器返回的描述信息
                            const description = img.description || 'No description available';
                            addImageToGallery(img.collection, img.filename, description);
                        } else {
                            console.warn('图片缺少文件名或集合信息:', img);
                        }
                    });
                } else {
                    console.error('无效的数据结构:', data);
                }
            } else {
                console.error('获取图片失败，状态码:', response.status);
            }
        } catch (error) {
            console.error('Failed to fetch uploaded images:', error);
        }
    }

    // 尝试获取上传的图片
    fetchUploadedImages();

    // 3. Function to Add Images to Gallery (REPLACE YOUR EXISTING VERSION WITH THIS)
    function addImageToGallery(collection, filename, description) {
        console.log(`尝试添加图片到集合: ${collection}, 文件名: ${filename}`);
        
        const collectionMap = {
        'paperwork': 'paperwork',
        'admissionletters': 'admissionletters',
        'academichandbook': 'academichandbook',
        'cafeteria': 'cafeteria',
        'uniforms': 'uniforms',
        'souv': 'souv',
        'rules173': 'rules173',
        '173rules': 'rules173',
        'badges': 'badges',
        'bicycle-plates': 'bicycle-plates'
        // 如有其他别名可继续扩展
    };
    let actualCollection = collectionMap[collection?.toLowerCase()] || 'paperwork';

    const gallery = document.querySelector(`#${actualCollection}-popup .gallery-container`);
        
        if (gallery) {
            console.log(`找到画廊容器: ${actualCollection}`);
            // 检查图片是否已经存在
            const existingImages = gallery.querySelectorAll('img');
            for (let img of existingImages) {
                if (img.src.includes(filename)) {
                    console.log(`图片 ${filename} 已存在，跳过`);
                    return; // 图片已存在，不重复添加
                }
            }
            
            const newItem = document.createElement('div');
            newItem.className = 'gallery-item';
            newItem.innerHTML = `
                <img src="/uploads/${filename}" class="gallery-image" loading="lazy" style="max-width: 100%; height: auto;">
                <div class="image-description">${description}</div>
            `;
            gallery.appendChild(newItem);
            
            // *** ADD THIS NEW LINE: Add edit button to the new gallery item ***
            addEditButtonToGalleryItem(newItem, filename);
            
            // 为新添加的图片添加点击事件监听器
            const newImage = newItem.querySelector('.gallery-image');
            if (newImage) {
                newImage.addEventListener('click', function() {
                    const description = this.nextElementSibling?.textContent || '';
                    openFullscreen(this.src, description);
                });
            }
            
            console.log(`成功添加图片 ${filename} 到 ${actualCollection} 画廊`);
        } else {
            console.error(`未找到集合 ${actualCollection} 的画廊容器`);
        }
    }

    // ========== KEEP ALL YOUR EXISTING CODE BELOW ==========

    // 4. Popup Handling (for all collections)
    document.querySelectorAll('.grid-item[id]').forEach(item => {
        item.addEventListener('click', function() {
            const popupId = `${this.id}-popup`;
            const popup = document.getElementById(popupId);
            if (popup) popup.style.display = 'flex';
        });
    });

    // 5. Close Popups
    document.querySelectorAll('.close-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            document.querySelectorAll('.popup-overlay').forEach(popup => {
                popup.style.display = 'none';
            });
        });
    });

    // ========== ADD THIS NEW CODE AT THE END ==========
    // Add edit buttons to existing static images (bicycle plates, badges, etc.)
    setTimeout(() => {
        document.querySelectorAll('.gallery-item').forEach(item => {
            const img = item.querySelector('.gallery-image');
            if (img) {
                // Extract filename from src for static images
                let filename;
                if (img.src.includes('/images/')) {
                    filename = img.src.split('/').pop();
                } else if (img.src.includes('/uploads/')) {
                    filename = img.src.split('/').pop();
                }
                
                if (filename) {
                    addEditButtonToGalleryItem(item, filename);
                }
            }
        });
    }, 1000); // Wait 1 second for all images to load

});

</script>

</body>
</html>
